import React from 'react';
import {
    Row,
    Col,
    Table,
    Icon,
    Button,
    Modal,
    Form,
    Tooltip,
    message
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import format from '../BusStation/RentAdmin/format';
import './less/common.less';

const FormItem = Form.Item;
const confirm = Modal.confirm;

class Erweima extends React.Component {
    constructor(props) {
        super(props);
        const user = JSON.parse(sessionStorage.getItem("user"));
        this.state = {
            dataSource: [],
            loading: false,
            pagination: {
                current: 1,
                pageSize: 10
            },
            onChange: this.onChange,
            keyword: '',
            visible: false,
            visibleCom: false,
            user: user
        };
    };

    componentDidMount() {
        this.getOrderInfo();

    };

    search(value) {
        this.setState({ keyword: value });
        this.getOrderInfo({ keyword: value });
    }

    onChange = (pagination, filters, sorter) => {
        this.getOrderInfo({
            sortField: sorter.field,
            sortOrder: sorter.order,
            page: pagination.current,
            keyword: this.state.keyword,
            ...filters
        });
    };

    getOrderInfo = (params = {}) => {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        var keyword = typeof (params.keyword) === "undefined"
            ? ''
            : params.keyword;
        axios
            .get(`${config.api}Marketing/GetMarketQrCode?page=${params.page}&pageSize=${this.state.pagination.pageSize}&key=${keyword}`, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                //console.log(data)
                const pagination = {
                    ...this.state.pagination
                };
                pagination.total = data.data.pageList.totalRows;
                pagination.current = params.page;
                this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });
            })
            .catch(err => {
                intercept;
            })
    };

    // 编辑工作內容模态框
    showModalCompile = (e, record, status) => {
        this.setState({
            visibleCom: true
        });
        this.status = status;
        //   通过此status判断编辑还是添加
        if (status == '1') {
            this.id = record.id;
            this.props.form.setFieldsValue({
                qrUrl: record.qrUrl,
                qrContentText: record.qrContentText,
                qrDesc: record.qrDesc,
                scene: record.scene,
                qrMarketingDesc: record.qrMarketingDesc,
                marketingPersonName: record.marketingPersonName,
                marketingPersonOrganCode: record.marketingPersonOrganCode
            });
        }
    }
    handleOkCompile = (e) => {
        this.setState({
            visibleCom: false,
        });
    }
    handleCancelCompile = (e) => {
        this
            .props
            .form
            .resetFields();
        this.setState({
            visibleCom: false,
        });
    }
    CompileSubmit = (e) => {
        e.preventDefault();
        const token = sessionStorage.getItem("token");
        const params = this.props.form.getFieldsValue();
        const user = this.state.user;
        if (this.status == 1) {
            axios.post(`${config.api}Marketing/EditMarketQrCode`,
                { id: this.id, qrUrl: user.qrUrl, qrContentText: params.qrContentText, qrDesc: params.qrDesc, scene: params.scene, qrMarketingDesc: params.qrMarketingDesc, marketingPersonName: params.marketingPersonName },
                { headers: { Authorization: 'Bearer ' + token } })
                .then((data) => {
                    //console.log(data)
                    if (data.data.result) {
                        message.success('编辑成功！')
                        this.getOrderInfo();
                        this.handleOkCompile();
                    } else {
                        message.warning(data.data.errorMessage)
                    }
                })
                .catch(err => {
                    intercept;
                })
        } else {
            axios.post(`${config.api}Marketing/AddMarketQrCode`,
                { qrUrl: user.qrUrl, qrContentText: params.qrContentText, qrDesc: params.qrDesc, scene: this.state.scene, qrMarketingDesc: params.qrMarketingDesc, marketingPersonName: params.marketingPersonName },
                { headers: { Authorization: 'Bearer ' + token } })
                .then((data) => {
                    //console.log(data)
                    if (data.data.result) {
                        message.success('添加成功！')
                        this.getOrderInfo();
                        this.handleOkCompile();
                    } else {
                        message.warning(data.data.errorMessage)
                    }
                })
                .catch(err => {
                    intercept;
                })
        }

        this.setState({
            visible: false,
        });
    }
    // 编辑工作內容模态框结束~~

    // 删除工作内容
    deleteSummary = (e, record) => {
        var that = this;
        const token = sessionStorage.getItem("token");
        confirm({
            title: '确定删除吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                axios.post(`${config.api}DailyStatics/AddSummary`, { id: record.id, status: 2 }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
                    if (data.data.result) {
                        that.getOrderInfo();
                        message.success('删除成功！')
                    } else {
                        const modal = Modal.success({
                            title: '删除失败！',
                            content: data.data.Message,
                        });
                        setTimeout(() => modal.destroy(), 2000);
                    }
                })
                .catch(err => {
                    intercept;
                })
            },
            onCancel() {

            },
        });
    }

    render() {
        const Search = Input.Search;
        const columns = [
            {
                title: '二维码地址',
                dataIndex: 'qrUrl',
                width: 100
            }, {
                title: '码内容',
                dataIndex: 'qrContentText',
                width: 100

            }, {
                title: '码描述',
                dataIndex: 'qrDesc',
                width: 100
            }, {
                title: '创建时间',
                width: 80,
                render: (text, record) => {
                    return (
                        <span>{format.format(record.qrGenTime)}</span>
                    )
                }
            }, {
                title: '场景值',
                dataIndex: 'scene',
                width: 80
            }, {
                title: '推广描述',
                dataIndex: 'qrMarketingDesc',
                width: 80
            }, {
                title: '推广人',
                dataIndex: 'marketingPersonName',
                width: 60
            }, {
                title: '操作',
                width: 100,
                render: (text, record) => {
                    return (
                        <span>
                            <Button type="primary" className="compileBtn" ghost onClick={(e, record) => { this.showModalCompile(e, text, '1') }}>编辑</Button>
                            {/* <Button type="danger" className="delBtn" onClick={(e, record) => { this.deleteSummary(e, text) }}>删除</Button> */}
                        </span>
                    )
                }
            }
        ];
        const className = "components-table-demo-nested";
        const scroll = {
            y: 600
        };
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 6
                }
            },
            wrapperCol: {
                xs: {
                    span: 10
                },
                sm: {
                    span: 14
                }
            }
        };
        return (
            <div className="orderinfo">
                {/* 編輯工作內容的模态框 */}
                <Modal
                    title="编辑"
                    visible={this.state.visibleCom}
                    onOk={this.handleOkCompile}
                    onCancel={this.handleCancelCompile}
                    footer={null}
                >
                    <Form onSubmit={this.CompileSubmit}>
                        <FormItem {...formItemLayout} label={(
                            <span>
                                码地址
                                <Tooltip title="自动填充">
                                    <Icon type="question-circle-o" />
                                </Tooltip>
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('qrUrl', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input />)}
                        </FormItem>
                        <FormItem {...formItemLayout} label={(
                            <span>
                                码内容
                                <Tooltip title="自动填充">
                                    <Icon type="question-circle-o" />
                                </Tooltip>
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('qrContentText', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input />)}
                        </FormItem>
                        <FormItem {...formItemLayout} label={(
                            <span>
                                码描述
                                <Tooltip title="自动填充">
                                    <Icon type="question-circle-o" />
                                </Tooltip>
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('qrDesc', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input />)}
                        </FormItem>
                        <FormItem {...formItemLayout} label={(
                            <span>
                                场景值
                                <Tooltip title="自动填充">
                                    <Icon type="question-circle-o" />
                                </Tooltip>
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('scene', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input />)}
                        </FormItem><FormItem {...formItemLayout} label={(
                            <span>
                                推广描述
                                <Tooltip title="自动填充">
                                    <Icon type="question-circle-o" />
                                </Tooltip>
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('qrMarketingDesc', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input />)}
                        </FormItem><FormItem {...formItemLayout} label={(
                            <span>
                                推广人
                                <Tooltip title="自动填充">
                                    <Icon type="question-circle-o" />
                                </Tooltip>
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('marketingPersonName', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input />)}
                        </FormItem><FormItem {...formItemLayout} label={(
                            <span>
                                推广人单位编码
                                <Tooltip title="自动填充">
                                    <Icon type="question-circle-o" />
                                </Tooltip>
                            </span>
                        )} hasFeedback>
                            {getFieldDecorator('marketingPersonOrganCode', {
                                rules: [
                                    {
                                        required: true,
                                        message: 'Please input your startandend!',
                                        whitespace: true
                                    }
                                ]
                            })(<Input type="number" />)}
                        </FormItem>
                        <Row>
                            <Col span={24}>
                                <FormItem className="center">
                                    <Button type="primary" style={{ marginRight: 10 }} className="submitBtn" htmlType="submit">提交</Button>
                                    <Button onClick={this.handleCancelCompile}>取消</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>
                <Row gutter={8} style={{
                    marginTop: '20px'
                }}>
                    <Col span={24}>
                        <div
                            style={{
                                textAlign: 'center',
                                margin: 10
                            }}>
                            <Search
                                placeholder="请输入任意查询条件"
                                style={{
                                    width: 600
                                }}
                                onSearch={value => this.search(value)} />

                            <Button style={{ marginLeft: 350, width: 100 }} type="primary" onClick={() => this.showModalCompile(undefined, undefined, '0')}>添加</Button>
                        </div>
                        <Table
                            className="menuItem"
                            {...this.state}
                            rowKey={record => record.id}
                            bordered={true}
                            className={className}
                            columns={columns}
                            scroll={scroll} />
                    </Col>
                </Row>
            </div>
        )
    }
}
const CErweima = Form.create()(Erweima);
export default CErweima
